<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 引入Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!--引入zyp的css-->
  <link rel="stylesheet" href="css/zyp.css">
  <link rel="stylesheet" href="plugins/elementUI/index.css">



</head>
<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

<body class="hold-transition sidebar-mini" style="width: 100%;">
  <div id="erp">
    <!-- 导航栏 -->
    <div style="background-color: white; position: relative; top: 2px;">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">表单设计</a></li>
        <li><a href="#">表单配置</a></li>
        <li><a href="#">属性管理</a></li>
        <li><a href="#">菜单管理</a></li>
      </ul>
    </div>
    <div
      style="background-color: white; height: 650px; margin-top: 15px; margin-left: 15px; margin-right: 15px; border-radius: 5px;">
      <div style="margin-left: 15px; margin-right: 15px;">
        <!-- 按钮部分-->
        <button type="button" class="btn btn-primary" style="margin-top: 7px; margin-left: 5px;">新增菜单</button>
        <!--右上角三个小图标-->
        <div class="navbar-right" style="margin-right: 5px; margin-top: 15px;">
          <img src="" class="glyphicon glyphicon-trash">
          &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
          <img src="" class="glyphicon glyphicon-refresh">
          &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
          <img src="" class="glyphicon glyphicon-fullscreen">
        </div>

        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入菜单名称关键字">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <button class="button button4 navbar-right">全部</button>
        <button class="button button4 navbar-right">启用</button>
        <button class="button button4 navbar-right">禁用</button>
      </div>
      <!-- 表格部分 -->
      <div style="margin-left: 15px; margin-right: 15px; margin-top: 15px; height: 510px; ">
        <table class="table table-hover">
          <thead style="background-color: #fafafa;">
            <tr>
              <th>操作</th>
              <th>菜单名称</th>
              <th>路由</th>
              <th>类型</th>
              <th>设置默认页</th>
              <th>顺序</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
            <tr>
              <td>
                <img class="glyphicon glyphicon-search" src="">
                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="glyphicon glyphicon-edit" src="">
              </td>
              <td>+首页</td>
              <td>/dashboard/analysls</td>
              <td>配置菜单</td>
              <td>
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </td>
              <td>1</td>
              <td>这是一段描述……</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 分页 -->
      <div style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[12, 200, 300, 400]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </div>

    </div>
  </div>
  <!-- </div> -->



  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="dist/js/pages/dashboard3.js"></script>
  <!-- 引入vue -->
  <script src="plugins/vue-2.6.10/vue-2.6.10/vue-resource.min.js"></script>
  <script src="plugins/vue-2.6.10/vue-2.6.10/vue.js"></script>
  <!--引入ElementUi-->
  <script src="plugins/elementUI/index.js"></script>
  <!-- zyp的script-->
  <script>
    $(function () {
      var wer = new Vue({
        el: "#erp",
        data() {
          return {
            //switch开关
            value: true,
            //分页
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4

          }
        },
        methods: {
          handleSizeChange(val) {
            console.log('每页 ${val} 条');
          },
          handleCurrentChange(val) {
            console.log('当前页: ${val}');
          }
        }
      });
    })

  </script>
</body>

</html>